<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/button.css">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Easyblog</title>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="col-xs-3">
                <div class="nav-bar header">
                    <a class="navbar-brand" href="#">
                        <img alt="Brand" src="">
                    </a>
                </div>
            </div>
            <div class="col-xs-9">
                <ul class="nav navbar-nav">
                        <li><a href="/index/" style="background-color:#f1f1f1;"><font color="#000">主页</font></a></li>
                        <li><a href="/index/add_essay/"><font color="#000">分享</font></a></li>
                        <li><a href="http://weibo.com/u/2238952445?refer_flag=1001030102_" style="background-color:#f1f1f1;"><font color="#000">关于</font></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-user-circle-o pull-center fa-lg"></i>
                            <!--{% if request.user.is_authenticated %}-->
                            <!--你好，{{ request.user.username }}-->
                            <!--{% else %}-->
                            <font color="#000">用户</font>
                            <!--{% endif %}-->
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <!--{% if request.user.is_authenticated %}-->
                            <li><a href="{% url 'logout' %}">注销</a></li>
                            <li class="divider"></li>
                            <li><a href="#">else</a></li>
                            <!--{% else %}-->
                            <li><a href="javascript:;" class="theme-login">登录</a></li>
                            <li class="divider"></li>
                            <li><a href="{% url 'register' %}">注册</a></li>
                            <li class="divider"></li>
                            <li><a href="#">else</a></li>
                            <!--{% endif %}-->
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="col-xs-3">
            <a href="http://www.bootcss.com/" class="button button-block button-rounded button-primary button-large">Go</a>
            <br>
            <div class="list-group side-bar" style="width:100%;">
                <a href="/index/" class="list-group-item active">热门分享</a>
                <a href="/indexbynew/" class="list-group-item">最新分享</a>
                <a href="#" class="list-group-item">我赞过的</a>
                <!--{% endif %}-->
                <!--{% if state == 2 %}-->
                <!--<a href="/index/" class="list-group-item">热门分享</a>-->
                <!--<a href="/indexbynew/" class="list-group-item active">最新分享</a>-->
                <!--<a href="#" class="list-group-item">我赞过的</a>-->
                <!--{% endif %}-->
                <!--{% if state == 3 %}-->
                <!--<a href="#" class="list-group-item">我赞过的</a>-->
                <!--<a href="/index/" class="list-group-item">热门分享</a>-->
                <!--<a href="/indexbynew/" class="list-group-item">最新分享</a>-->
                <!--<a href="#" class="list-group-item active">我赞过的</a>-->
                <!--{% endif %}-->
            </div>
        </div>
        <div class="col-xs-9">
            <div class="row">
                <div class="col-xs-6">
                    <font face="youyuan" size="4">标题</font>
                </div>
                <div class="col-xs-3">
                    <font face="youyuan" size="4">热度</font><!-- <i class="fa fa-heart-o fa-fw" aria-hidden="true" style="color: red;"></i> -->
                </div>
                <div class="col-xs-3">
                    <font face="youyuan" size="4">发布时间</font>
                </div>
            </div>
            <hr style="margin-top:5px;margin-bottom:10px;">
            <div class="row">
                <div class="col-xs-6">
                    <div class="news-list-item">
                        <a class="title" href="">
                            <h5 style="margin-top: 5px;margin-bottom: 5px;">WAKE</h5>
                        </a>
                        <span class="label label-warning">{{j}}</span>
                        <span class="label label-default">{{j}}</span>
                        <span class="label label-info">{{j}}</span>
                        <span class="label label-primary">{{j}}</span>
                        <span class="label label-success">{{j}}</span>
                        <span class="label label-danger">{{j}}</span>
                        <span class="label label-selfset">{{j}}</span>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div style="float: left;width:10%;">
                        <i class="fa fa-heart-o fa-fw" aria-hidden="true" style="color: red;"></i>
                    </div>
                    <div style="float:right;width:85%;">
                        <div class="progress" style="margin-bottom:0px;">
                            <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="10" style="width:{{ post.popular }}%;color:#ea4c89">
                                <span class="sr-only">10% Complete (danger)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div class="news-list-item">
                        <span class="fa fa-info-circle info2">{{ post.creatdate|date:"Y年n月d日-H:i" }}</span>
                    </div>
                </div>
            </div>
            <hr style="margin-top:5px;margin-bottom:10px;">
        </div>
    </div>
</body>
</html>